import {Breadcrumb, Button, Card, Form, Input, message, Radio, Select, Space, Upload} from 'antd'
import {Link, useSearchParams} from 'react-router-dom'
import './index.scss'
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'
import React, {useEffect, useState} from "react";
import {createArticleAPI, getArticleById, updateArticleAPI} from "@/apis/article";
import {PlusOutlined} from "@ant-design/icons";
import {useChannel} from "@/hooks/useChannel";

const {Option} = Select

export const Publish = () => {
    const [imageList, setImageList] = useState([])
    // 记录图片上传类型选择
    const [imageType, setImageType] = useState(0)
    const onUploadChange = (info) => {
        setImageList(info.fileList)
    }
    const {channels} = useChannel()
    const [form] = Form.useForm();
    // 文件上传
    const onFinish = (formValue) => {
        // 判断type和图片数量是否相等
        if (imageList.length !== imageType) {
            return message.warning('封面类型和图片数量不匹配')
        }
        const {channel_id, content, title} = formValue
        const reqData = {
            content,
            title,
            cover: {
                type: imageType,
                // 编辑url的时候也需要做处理
                images: imageList.map(item => {
                    if (item.response) {
                        return item.response.data.url
                    } else {
                        return item.url
                    }
                })
            }, channel_id
        }
        //   提交数据
        // 需要判断 新增和修改接口的调用
        if (articleId) {
            updateArticleAPI({...reqData, id: articleId}).then(data => {
                if (data.message === 'OK') {
                    message.success('文章修改成功')
                }
            })
        } else {
            createArticleAPI(reqData).then(data => {
                if (data.message === 'OK') {
                    message.success('文章发布成功')
                    form.resetFields()
                    setImageType(0)
                }
            })
        }

    }
    // 表单提交回调
    const onRichTextChange = (value) => {
        form.setFieldsValue({content: value});
    };
    // 类型选择回调
    const onTypeChange = (value) => {
        setImageType(value.target.value)
    }
    // 载入文章数据
    const [searchParams] = useSearchParams();
    // 文章数据
    const articleId = searchParams.get('id');
    useEffect(() => {
        async function getArticleDetail() {
            const res = await getArticleById(articleId)
            const {cover, ...infoValue} = res.data
            form.setFieldsValue({...infoValue, type: cover.type})
            setImageType(cover.type)
            setImageList(cover.images.map(url => ({url})))
        }

        if (articleId) {
            getArticleDetail()
        }
    }, [articleId, form])
    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        {title: <Link to={'/'}>首页</Link>},
                        {title: `${articleId ? '编辑文章' : '发布文章'}`},
                    ]}
                    />
                }
            >
                <Form
                    form={form}
                    labelCol={{span: 4}}
                    wrapperCol={{span: 16}}
                    initialValues={{type: 0}}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{required: true, message: '请输入文章标题'}]}
                    >
                        <Input placeholder="请输入文章标题" style={{width: 400}}/>
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{required: true, message: '请选择文章频道'}]}
                    >
                        <Select placeholder="请选择文章频道" style={{width: 400}}>
                            {channels.map((item) => (
                                <Option key={item.id} value={item.id}>{item.name}</Option>
                            ))}
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {imageType > 0 && <Upload
                            name="image"
                            listType="picture-card"
                            showUploadList
                            action={'http://geek.itheima.net/v1_0/upload'}
                            onChange={onUploadChange}
                            maxCount={imageType}
                            fileList={imageList}
                        >
                            <div style={{marginTop: 8}}>
                                <PlusOutlined/>
                            </div>
                        </Upload>}
                    </Form.Item>
                    {/*富文本编辑器*/}
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{required: true, message: '请输入文章内容'}]}
                    > <ReactQuill
                        className="publish-quill"
                        theme="snow"
                        placeholder="请输入文章内容"
                        onChange={onRichTextChange}
                    ></ReactQuill></Form.Item>

                    <Form.Item wrapperCol={{offset: 4}}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
